<script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.merkwelt.com/people/stan/geo_js/js/geo.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>

    function initialize_map()
    {
        var myOptions = {
	      zoom: 4,
	      mapTypeControl: true,
	      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
	      navigationControl: true,
	      navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
	      mapTypeId: google.maps.MapTypeId.ROADMAP
	    }
	    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    }

    function initialize()
    {
	    if(geo_position_js.init())
	    {
		    document.getElementById('current').innerHTML="Receiving...";
		    geo_position_js.getCurrentPosition(show_position,function(){document.getElementById('current').innerHTML="Couldn't get location"},{enableHighAccuracy:true});
	    }
	    else
	    {
		    document.getElementById('current').innerHTML="Functionality not available";
	    }
    }

    function show_position(p)
    {
	    document.getElementById('current').innerHTML="latitude="+p.coords.latitude.toFixed(2)+" longitude="+p.coords.longitude.toFixed(2);
	    var pos=new google.maps.LatLng(p.coords.latitude,p.coords.longitude);
	    map.setCenter(pos);
	    map.setZoom(14);

	    var infowindow = new google.maps.InfoWindow({
	        content: "<strong>You are here</strong>"
	    });

	    var marker = new google.maps.Marker({
	        position: pos,
	        map: map,
	        title:"You are here"
	    });

        // Add circle overlay and bind to marker
        var circle = new google.maps.Circle({
          map: map,
          radius: 1000,    // in metri
          fillColor: '#AA0000',
          strokeColor: '#AA0000'
        });
        circle.bindTo('center', marker, 'position');

        // Add circle overlay and bind to marker
        var circle = new google.maps.Circle({
          map: map,
          radius: 500,    // in metri
          fillColor: '#000477',
          strokeColor: '#000477'
        });
        circle.bindTo('center', marker, 'position');


	    google.maps.event.addListener(marker, 'click', function() {
	        infowindow.open(map,marker);
	    });

        // Create and add a smooth circle
		//var circle1 = new CircleOverlay(map, map.getCenter(), 100, "#000000", 1, 1, '#009900', 0.25, 100);

    }

</script >

<body onload="initialize_map();initialize()">
	<div data-role="header">
        <h1>Dove Sei</h1>
        <A HREF="javascript:history.go(0)">Refresh</A>
        <%= link_to 'Home', posts_path, "class" => "ui-btn-right", "data-icon" => "home" %>
    </div>

    <div data-role="content">
      <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
        <div id="current">Initializing...</div>
        <div id="map_canvas" style="height:400px"></div>
      </div>
    </div>

<div data-role="footer" style="height: 30px"  data-position="fixed"></div>

</body>